import React from 'react';
import ReactDOM from 'react-dom';
import { Router,Route,hashHistory,IndexRoute } from 'react-router';
import jquery from '../js/jquery';
import PlaylistItem from '../components/playlistItem.js';
import NavLink from '../modules/NavLink'
import style from '../style/detail.scss';
import edi1 from '../ehi/jquery/jquery-1.4.4.min.js';
import edi2 from '../ehi/xheditor-1.2.2.min.js';
import edi3 from '../ehi/xheditor_lang/zh-cn.js';
export default class Detail extends React.Component{
	constructor(props){
        super(props)
        this.state={
        	arr : [],
			id:1
        }
    }
	componentWillMount(){
		var that = this;
		getCookie('detailKey')
		console.log(getCookie('detailKey'))
		//添加cookie的函数
		function addCookie(key,value,day){
			var date=new Date();//创建日期对象
			date.setDate(date.getDate()+day);//过期时间：获取当前的日期+天数，设置给date
			document.cookie=key+'='+encodeURI(value)+';path=/;expires='+date;//添加cookie，设置过期时间
		}
//得到cookie
		function getCookie(key){
			var str=decodeURI(document.cookie);
			var arr=str.split('; ');
			for(var i=0;i<arr.length;i++){
				var arr1=arr[i].split('=');
 				if(arr1[0]==key){
					return arr1[1];
				}
			}
		}
//删除cookie
		function delCookie(key,value){
			
			addCookie(key,value,-1);//添加的函数,将时间设置为过去时间
		}
		this.state.id =getCookie('detailKey')-1;
		console.log(this.state.id )
    	var ajaxData = {
    		type : 'get',
    		url : 'http://www.genzqi.online/qqmusic/php/fashionData.php',
    	}
    	var ajax=new XMLHttpRequest();
		ajax.open(ajaxData.type,ajaxData.url,true);
		ajax.send();
		ajax.onreadystatechange=function(){
			if(ajax.readyState==4 && ajax.status==200){
				that.state.arr=JSON.parse(ajax.responseText);
				that.setState({
					arr : that.state.arr
				});
				
			}
		}
    }

    render(){
		const serviceShows = this.state.arr.map((service,index)=>{
			if(index==this.state.id){
		return (
			
			<div onLoad={loading}  className={style.detail}>
			<div  className={style.detailWrap}>
				<div  className={style.detailLeft}>
					<img src={this.state.arr[this.state.id].img} />
				</div>
				<div  className={style.detailRight}>
					<div  className={style.header}>
						<h2>{this.state.arr[this.state.id].song}</h2>
					</div>
					<div  className={style.singer}>
						<div  className={style.data__singer}>
							<a href="##"  title={this.state.arr[this.state.id].singer}  className={style.data__singer_txt}  > {this.state.arr[this.state.id].singer}  </a>
						</div>
					</div>
					<div  className={style.info}>
						<ul  className={style.data__info}>
						    <li  className={style.data_info__item}>专辑：<a href="##"  className={style.js_album}    title="金曲捞 第11期">金曲捞 第11期</a></li>
						    <li  className={style.data_info__item}>语种：国语</li>
						   </ul>
						<ul  className={style.data__info}>    
						    <li  className={style.data_info__item}>流派：Pop 流行</li>
						    <li  className={style.data_info__item}>发行公司：<a >北京万象传媒广告有限公司</a></li>
						</ul>
						<ul  className={style.data__info}>
							<li  className={style.data_info__item}>发行时间：2017-06-23</li>
						</ul>
					</div>
					<div  className={style.data__actions} >
					    <a href="##"  className={style.mod_btn_green}><i  className={style.mod_btn_green__icon_play}></i>播放</a>
					    <a href="javascript:;"  className={style.mod_btn}><i  className={style.mod_btn__icon_like}></i>收藏</a>
					    <a href="javascript:;"  className={style.mod_btn} ><i  className={style.mod_btn__icon_menu}></i>更多</a>
					</div>
				</div>
			</div>
            <div className={style.talkAbout}>
			<div className={style.left}>
				<textarea id="preview" className={style.xheditor} name="preview" rows="10" cols="120"></textarea>
				<button id="talksubmit" onClick={talksubmit}>评论</button>
			</div>
			<div className={style.right}>
				<ul id ={'content'}>
					<li>
						<span className ={style.people}></span>
						<span className = {style.content}></span>
						<span className = {style.time}></span>
					</li>
				</ul>
			</div>
		</div>
		</div>
		
		)}
		function loading(){
			var username = getCookie('usename');
			console.log(username)
			$.ajax({
				type:'post',
				url:'http://www.smilening.online/qqmusic/php/loading.php',
				
				success:function(d){
					var d = JSON.parse(d);
					var html = "";
					for(var i = 0;i<d.length;i++){
					html += "<li>"+
						"<span class= people>"+d[i].username+"</span>"+
						"<span class=content>"+d[i].content+"</span>"+
						"<span class=time>"+d[i].date+"</span>"+
					"</li>";
					$('#content').html(html);
				}}
			})
		}
		function talksubmit(){
			var content = $('#preview').val();
			if(getCookie('usename') && content !=''){
				var username = getCookie('usename');
			
			$.ajax({
				type:'post',
				url:'http://laleyy.online/comment.php',
				data:{
					username:username,
					content:content
				},
				success:function(d){
					loading();
					$('textarea').val('');
				}
			})
			}else{
				alert('请登录,或者输入内容');
			}
			
		}
	})
	return(
		<div>
			{serviceShows}
		</div>
	)
}
	

}